<!--
 * @Author: Qimu
 * @Date: 2020-06-26 01:38:18
 * @LastEditors: Qimu
 * @LastEditTime: 2020-07-12 14:47:08
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\views\Article\AddArticle.vue
--> 
<template>
  <div class="article">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <!-- 文章表单区域 start-->
      <div>
        <!-- rules="addArticleFormRef" -->
        <el-form :model="articleForm" ref="articleForm">
          <el-row>
            <el-col :span="5">
              <el-form-item label="文章题目" :label-width="formLabelWidth" prop="title">
                <el-input v-model="articleForm.article_title" autocomplete="off" size="small"></el-input>
              </el-form-item>
              <el-form-item label="简介" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  v-model="articleForm.article_summary"
                  autocomplete="off"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item label="分类" :label-width="formLabelWidth" prop="blogSortUid">
                <el-select v-model="articleForm.article_category" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in articleCategoryList"
                    :key="item._id"
                    :label="item.category_name"
                    :value="item.category_name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标签" :label-width="formLabelWidth">
                <el-select
                  v-model="articleForm.article_tagValue"
                  multiple
                  size="small"
                  placeholder="请选择"
                  filterable
                >
                  <!-- <el-option
                    v-for="item in tagData"
                    :key="item.uid"
                    :label="item.content"
                    :value="item.uid"
                  ></el-option>-->
                </el-select>
              </el-form-item>
              <el-form-item label="是否发布" :label-width="formLabelWidth" prop="isPublish">
                <el-switch
                  v-model="articleForm.article_isPublish"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="19">
              <span>内容</span>
              <CKEditor ref="ckeditor"></CKEditor>
              <!-- <el-form-item label="内容" :label-width="formLabelWidth" prop="content"></el-form-item> -->
            </el-col>
          </el-row>
          <el-button type="primary" size="mini" @click="goBack">返回</el-button>
          <el-button type="primary" size="mini" @click="saveHtml">保存</el-button>
        </el-form>
      </div>
      <!-- 文章表单区域 end-->
    </el-card>
    <!-- 内容区域 end-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {
    CKEditor: () => import('@/components/CKEditor/CKEditor.vue'),
  },
  data() {
    return {
      formLabelWidth: '120px',
      articleForm: {
        article_title: null, //文章题目
        article_summary: null, //文章简介
        article_content: null, //内容
        article_category: null, //文章分类
        article_tagValue: null, //文章标签
        article_isPublish: null, //是否发布
        // uid: null,
        // fileUid: null,
        // isOriginal: null, //是否原创
        // author: null, //作者
        // clickCount: 0,
        // articlesPart: null //文章出处
      },
    }
  },
  created() {},
  computed: {
    ...mapGetters(['articleCategoryList']),
  },
  methods: {
    //返回文章列表
    goBack() {
      this.$router.go(-1)
    },

    //保存文章表单信息
    async saveHtml() {
      this.articleForm.article_content = this.$refs.ckeditor.content //获取富文本内容html
      const {
        article_title,
        article_summary,
        article_category,
        article_tagValue,
        article_isPublish,
        article_content,
      } = this.articleForm
      const { data: res } = await this.$api.article.addArticle(this.articleForm)
      if (res.meta.status !== 200) {
        this.$message.error({ message: res.meta.message }) //当前角色设置保存失败
      } else {
        // this.$refs.setRoleform.resetFields() //重置表单内容
        this.$message.success({ message: res.meta.message }) //当前角色设置保存成功
        // this.$store.dispatch('getrolesList')
      }
    },
  },
}
</script>
<style lang="sass" scoped>
.el-select
  width: 150px
</style>